import { Component, OnInit, Input } from "@angular/core";
import { HttpService } from "src/app/shared/service/http.service";
import { LoadingController } from '@ionic/angular';
import { disconnect } from "process";
declare let echarts: any;
@Component({
  selector: "app-analysis-chart",
  templateUrl: "./analysis-chart.component.html",
  styleUrls: ["./analysis-chart.component.scss"]
})
export class AnalysisChartComponent implements OnInit {
  @Input() tagData: any; // 标签数据

  chartOption: any; // 图表参数

  isSpinner = false; // 加载中……
  appTypeCustom: any;

  constructor(
    private http: HttpService,
    public loadingController: LoadingController
  ) { }

  ngOnInit() {

    const bodyStyles = window.getComputedStyle(document.body);
    this.appTypeCustom = bodyStyles.getPropertyValue('--appTypeCustom').trim().replace('"', '').replace('"', '');
    if (this.tagData.data && this.tagData.data.asynLoad && this.tagData.data.asynLoad.submit) {
      // 向后台请求图表数据
      this.isSpinner = true;
      const timer = setTimeout(() => {
        const params = {
          content: this.tagData.data.asynLoad.submit.content,
          id: this.tagData.data.asynLoad.submit.id,
          sessionId: localStorage.getItem("sessionId")
        };
        this.http.post("application/submit", params, res => {
          this.isSpinner = false;
          if (res.data) {
            this.chartOption = {
              grid: {
                left: 5,
                right: 5,
                top: 5,
                bottom: 5
              },
              series: [
                {
                  type: "pie",
                  radius: ["23%", "41%"],
                  label: {
                    normal: {
                      // padding: [30, -100],
                      align: "left",
                      formatter:
                        "{b|{c}}{c|" +
                        res.data.unit +
                        "} {b|{d}}{c|%} \n {a|{b}}",
                      // formatter: '{b|{c}' + this.tagData.data.unit + ' {d}%}',
                      rich: {
                        a: {
                          color: this.appTypeCustom !== 'LJ' ? "#8D8E94" : "#7E838C",
                          fontSize: 12,
                          lineHeight: 12,
                          fontWeight: 100
                        },
                        b: {
                          color: this.appTypeCustom !== 'LJ' ? "#27282E" : "#252629",
                          fontSize: 14,
                          lineHeight: 14,
                          fontWeight: "bold"
                          // fontFamily: "PingFangSC-Semibold,PingFangSC"
                        },
                        c: {
                          fontWeight: 100,
                          lineHeight: 12,
                          color: this.appTypeCustom !== 'LJ' ? "#27282E" : "#252629"
                        }
                      }
                    }
                  },
                  hoverAnimation: false,
                  itemStyle: {
                    borderColor: "#fff",
                    borderWidth: 1
                  },
                  color: res.data.data.map(v => v.color),
                  minAngle: 10,
                  avoidLabelOverlap: true, // 是否启用防止标签重叠策略
                  data: JSON.parse(
                    JSON.stringify(res.data.data).replace(/title/g, "name")
                  )
                }
              ]
            };
            const chart = echarts.init(document.getElementById('AnalysisChart'));
            chart.setOption(this.chartOption);
          }

        });
        clearTimeout(timer);
      }, 1000);
    } else {
      //  从tagData获取图表数据
      this.chartOption = {
        grid: {
          left: 5,
          right: 5,
          top: 5,
          bottom: 5
        },
        series: [
          {
            type: "pie",
            radius: ["23%", "41%"],
            label: {
              normal: {
                // padding: [30, -100],
                align: "left",
                formatter:
                  "{b|{c}}{c|" +
                  this.tagData.data.unit +
                  "} {b|{d}}{c|%} \n {a|{b}}",
                // formatter: '{b|{c}' + this.tagData.data.unit + ' {d}%}',
                rich: {
                  a: {
                    color: this.appTypeCustom !== 'LJ' ? "#8D8E94" : "#7E838C",
                    fontSize: 12,
                    lineHeight: 12,
                    fontWeight: 100
                  },
                  b: {
                    color: this.appTypeCustom !== 'LJ' ? "#27282E" : "#252629",
                    fontSize: 14,
                    lineHeight: 14,
                    fontWeight: "bold",
                    fontFamily: "PingFangSC-Semibold,PingFangSC"
                  },
                  c: {
                    fontWeight: 100,
                    lineHeight: 12,
                    color: this.appTypeCustom !== 'LJ' ? "#27282E" : "#252629"
                  }
                }
              }
            },
            hoverAnimation: false,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            },
            color: this.tagData.data.data.map(v => v.color),
            minAngle: 10,
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            data: JSON.parse(
              JSON.stringify(this.tagData.data.data).replace(/title/g, "name")
            )
          }
        ]
      };
      const chart = echarts.init(document.getElementById('AnalysisChart'));
      chart.setOption(this.chartOption);
    }

  }


}
